<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom :title="title" :isGrade="false" @change="gradeChange" />
		<block v-for="(item, index) in dataList.list" :key="index">
		  <datum-pic :innerData="item" layoutType="0" />
		</block>
		<u-loadmore height="88rpx" fontSize="24rpx" color="#999" :status="dataList.loading" />
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import datumPic from './components/datum-pic.vue';
	import {datumList} from '@/api/bks.datum.js';
	export default {
		components: {
			headerCustom,
			datumPic
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				title: '免费专区',
				dataList: {
				  list: [],
				  page: 1,
				  size: 20,
				  count: 0,
				  loading: 'none'
				},
				specialSubjectPlateId: '',
				specialSubjectId: '',
			}
		},
		onLoad(options) {
			if(options.specialSubjectPlateId){
				this.title = decodeURIComponent(options.title)
				this.specialSubjectPlateId = options.specialSubjectPlateId
				this.specialSubjectId = options.specialSubjectId
			}
			this.init()
			this.getDataList()
		},
		methods: {
		  // 数据初始化
		  init() {
			this.dataList = {
				list: [],
				page: 1,
				size: 10,
				total: 0,
				loading: 'none'
			  }
		  },
		  // 获取列表数据
		  getDataList() {
			if (this.dataList.loading == 'not') {
			  return
			}
			this.dataList.loading = 'loading'
			const {specialSubjectPlateId, specialSubjectId, dataList: { list, page, size } } = this
			const parant = {
				  page,
				  size,
				  specialSubjectPlateId,
				  specialSubjectId
			}
			datumList(parant).then(res => {
				this.dataList.list = this.dataList.list.concat(res.data.list)
				const {total, page, size} = res.data.pageInfoVO
				if (total == 0) {
					this.dataList.loading = 'list-not'
				} else if (total < size || page * size >= total) {
					this.dataList.loading = 'nomore'
				}
				this.dataList.count = total
			})
		  },
		},
		onReachBottom() {
			const {
				page,
				size,
				count,
				loading
			} = this.dataList
			if (loading == 'nomore') {
				return
			}
			if (page * size < count) {
				this.dataList.page = page + 1
				this.getDataList()
			} else {
				this.dataList.loading = 'nomore'
			}
		},
	}
</script>

<style lang="scss" scoped>
	/**index.wxss**/
	.header {
	  padding: 24rpx 30rpx;
	}
	
	.item .user-box {
	  padding: 0 30rpx;
	}
	
	.item .user-box .left image {
	  width: 68rpx;
	  height: 68rpx;
	  border-radius: 50%;
	  margin-right: 19rpx;
	}
	
	.item .user-box .right .vipPrice {
	  margin-right: 7rpx;
	}
	
	.item .user-box .right .price {
	  text-decoration: line-through;
	}
	
	.item .title {
	  padding: 0 30rpx;
	  margin: 30rpx 0 19rpx;
	}
	
	.item .pic {
	  width: 100%;
	  height: 340rpx;
	  padding: 30rpx 0 0;
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 100% 100%;
	}
	
	.item .pic .bg {
	  width: 223rpx;
	  height: 64rpx;
	  line-height: 64rpx;
	  background: #6871FE;
	  border-radius: 0px 32rpx 32rpx 0px;
	  text-align: center;
	}
</style>